<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
     </div>

<template id="cpn">
   <div>
    <h2>计数器:{{counter}}</h2>
    <button @click="a">+</button>
    <button @click="b">-</button>
   </div>
</template>

</template>
    <script src="../js/vue.js"></script>
    <script>   
    const obj1={
        counter:0
    }
    Vue.component('cpn',{
        template:'#cpn',
        data(){
            return obj1
        },
        methods:{
            a(){
                this.counter++
            },
            b(){
                this.counter--
            }
        }
    }) 
            //root 组件
        const app=new Vue({
            el:'#app',
            data:{
                message: "你好"
            }
        })

        const obj={
            name:"a",
            age:23
        }
        //实际返回的是内存地址
        function abc(){
            return obj
        }

    </script>
</body>
</html>